import React, { useCallback, useEffect } from 'react'
import './style.less'
import { Col, Row } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useImmer } from 'use-immer'
import { EMPTYTEXT, getItem, PERMISSIONS, message } from '@hs-admin/utils'
import { reqGetBannerIntro } from '@/api/assetMaintain/basicsData'

const Overview: React.FC = () => {
  const navigate = useNavigate()
  const [describelist, setDescribelist] = useImmer({
    describe1: '',
    describe2: '',
    describe3: '',
    describe4: ''
  })
  const permissions = getItem(PERMISSIONS)

  const getDesc1 = useCallback(async () => {
    const res = await reqGetBannerIntro(1)
    if (res.code === 200) {
      setDescribelist((prevState) => {
        prevState.describe1 = res.data.intro || EMPTYTEXT
      })
    }
  }, [setDescribelist])
  const getDesc2 = useCallback(async () => {
    const res = await reqGetBannerIntro(2)
    if (res.code === 200) {
      setDescribelist((prevState) => {
        prevState.describe2 = res.data.intro || EMPTYTEXT
      })
    }
  }, [setDescribelist])
  const addOrderList = () => {
    if (!permissions.includes('datashop.demand_order.create')) {
      return message.warning('暂无权限')
    }
    navigate('/dataService?newOrder=true')
  }
  const toSupportOrder = () => {
    navigate('/shoppingCart')
  }
  const toOrderList = () => {
    navigate('/dataService', {
      state: {
        params: {
          relation: 1
        }
      }
    })
  }
  const basicDataImp = () => {
    navigate('/marketBasicData')
  }
  const industryDataStashImp = () => {
    navigate('/marketIndustryData')
  }
  const toFile = () => {
    navigate('/DocMaintainView')
  }

  useEffect(() => {
    getDesc1()
    getDesc2()
  }, [getDesc1, getDesc2])

  return (
    <div className="overview-page-wrapper">
      <div className="title">火石数据资产</div>
      <Row className="mt-2" gutter={[8, 16]}>
        <Col span={12} onClick={addOrderList}>
          <div className="com-bg btn-item">
            <h1>数据服务下单</h1>
            <p>(直接向运营人员提交需求、获取数据表格)</p>
          </div>
        </Col>
        {false && (
          <Col span={8} onClick={toSupportOrder}>
            <div className="com-bg btn-item">
              <h1>数据供给下单</h1>
              <p>(自主选择获取数据，包括向指定环境持续传输数据)</p>
            </div>
          </Col>
        )}
        <Col span={12} onClick={toOrderList}>
          <div className="com-bg btn-item">
            <h1>我的订单</h1>
            <p>(跟进我相关的订单)</p>
          </div>
        </Col>
        <Col span={12}>
          <div className="com-bg basic-box">
            <div className="font">基础数据</div>
            <div className="fontstyle">{describelist.describe1}</div>
            <div className="enter-btn" onClick={basicDataImp}>
              <div className="enter">进入</div>
              <img className="arrowImg" src="/static/homeImg/arrow.png" alt="按钮图片" />
            </div>
          </div>
        </Col>
        <Col span={12}>
          <div className="com-bg industry-box">
            <div className="font">产业数仓</div>
            <div className="fontstyle">{describelist.describe2}</div>
            <div className="enter-btn" onClick={industryDataStashImp}>
              <div className="enter">进入</div>
              <img className="arrowImg" src="/static/homeImg/arrow.png" alt="按钮图片" />
            </div>
          </div>
        </Col>
      </Row>
      <div className="file-down mt-6">
        <main>
          <h1>文档下载</h1>
          <div className="enter-btn" onClick={toFile}>
            <div className="enter">进入</div>
            <img className="arrowImg" src="/static/homeImg/arrow.png" alt="按钮图片" />
          </div>
        </main>
        <div className="fontstyle">包含数据资产标准、数据产品文档、数据运营说明、相关说明材料等文档内容</div>
      </div>
    </div>
  )
}

export default Overview
